<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查找体育馆</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(to right, #8ecae6, #e7d0eb, #f9a0c0, #fad29a, #fde68a);
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 600px;
            margin-top: 50px;
        }

        .card {
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn-custom {
            background: linear-gradient(to right, #8ecae6, #e7d0eb, #f9a0c0, #fad29a, #fde68a);
            color: white;
        }

        .btn-custom:hover {
            background: linear-gradient(to right, #8ecae6, #e7d0eb, #f9a0c0, #fad29a, #fde68a);
        }

        #gym-container {
            max-height: 600px;
            overflow-y: auto;
            padding-right: 15px;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="card">
        <h2 class="text-center mb-4">查找体育馆</h2>
        <form id="findGymForm">
            <div class="mb-3">
                <label for="gymName" class="form-label">体育馆名称</label>
                <input type="text" class="form-control" id="gymName" name="gymName" required>
            </div>
            <button type="submit" class="btn btn-custom w-100">查找</button>
        </form>
    </div>

    <!-- 显示体育馆信息 -->
    <div id="gym-container" class="mt-5"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    // 表单提交时，使用AJAX请求数据
    $('#findGymForm').submit(function (event) {
        event.preventDefault();  // 阻止表单默认提交

        var gymName = $('#gymName').val().trim();  // 获取体育馆名称

        if (!gymName) {
            alert("体育馆名称不能为空！");
            return;
        }

        $.ajax({
            url: '/gym/findGym',  // 请求的URL
            type: 'GET',          // 请求方式
            dataType: 'json',     // 期望的响应类型
            data: { gymName: gymName },  // 请求体数据（体育馆名称）
            contentType: 'application/x-www-form-urlencoded',
            success: function (data) {
                const container = document.getElementById('gym-container');
                console.log(data.gymInfos);

                if (data.gymInfos && data.gymInfos.length > 0) {
                    let finalHtml = ''; // 初始化一个空字符串用于拼接HTML
                    // 遍历每个体育馆
                    data.gymInfos.forEach(gym => {
                        console.log(gym);
                        console.log(gym.gymName);

                        // 创建一个体育馆卡片的HTML结构
                        finalHtml += '<div class="col-md-4 mb-4">';
                        finalHtml += '<div class="card h-100 shadow-sm">';
                        finalHtml += '<div class="card-body">';
                        finalHtml += '<img src="../imgs/1.png" class="card-img-top" alt="体育馆图片">';
                        finalHtml += '<h5 class="card-title text-primary">' + gym.gymName + '</h5>';
                        finalHtml += '<p class="card-text text-secondary">';
                        finalHtml += '<strong>位置:</strong> ' + gym.gymLocation + '<br>';
                        finalHtml += '<strong>简介:</strong> ' + gym.gymDescription + '<br>';
                        finalHtml += '</p>';
                        finalHtml += '</div>';
                        finalHtml += '</div>';
                        finalHtml += '</div>';  // 结束一个体育馆卡片的 div
                    });
                    // 将拼接的HTML代码插入到页面
                    container.innerHTML = finalHtml;
                    console.log('Generated card:', finalHtml);
                } else {
                    // 如果没有体育馆，显示提示信息
                    container.innerHTML = '<p class="text-center text-muted">暂无符合条件的体育馆</p>';
                }
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);  // 错误信息
            }
        });

    });
</script>

</body>
</html>
